<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>影院管理</el-breadcrumb-item>
      <el-breadcrumb-item>影院列表</el-breadcrumb-item>
      <el-breadcrumb-item>放映厅列表</el-breadcrumb-item>
      <el-breadcrumb-item>新增排片计划</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <p>
      <span style="color: #409eff; font-weight: bold">{{
        this.cinemaInfo.cinema_name
      }}</span
      >的<span style="color: #409eff; font-weight: bold"
        >{{ this.cinemaInfo.cinema_room_name }}({{
          this.cinemaInfo.cinema_room_type
        }})</span
      >
      排片列表
    </p>
    <el-divider></el-divider>
    <el-table stripe :data="tableData" style="width: 100%">
      <el-table-column prop="title" label="电影名称"> </el-table-column>
      <el-table-column
        align="center"
        prop="showingon_date"
        label="放映时间"
        width="180">
      </el-table-column>
      <el-table-column
        align="center"
        width="120"
        prop="showingon_time"
        label="放映场次">
      </el-table-column>
      <el-table-column align="center" width="120" prop="price" label="票价(元)">
      </el-table-column>
      <el-table-column align="center" width="150" label="是否发布">
        <template slot-scope="scope">
          <el-switch
            @change="changeStatus(scope.row.plan_id, scope.row.status)"
            :active-value="1"
            :inactive-value="0"
            v-model="scope.row.status"></el-switch>
        </template>
      </el-table-column>
      <el-table-column width="100" label="操作">
        <template slot-scope="scope">
          <el-button
            @click="delShoingonPlans(scope.row.plan_id)"
            icon="el-icon-delete"
            type="danger"
            circle
            title="删除计划">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 存储当前放映厅信息
      cinemaInfo: {},
      // 存储放映厅id
      cinema_room_id: this.$route.params.id,
      // 排片计划
      tableData: [],
    }
  },
  methods: {
    // 监听排片状态的改变
    changeStatus(id, val) {
      if (val == 0) {
        this.noPublishPlan(id)
      }
      if (val == 1) {
        this.publishPlan(id)
      }
    },
    // 通过id加载影院放映厅列表
    loadCurrentCinemaRooms() {
      this.$http.CinemaRoomApi.queryById({
        id: this.cinema_room_id,
      }).then((res) => {
        console.log("当前影院放映厅", res)
        this.cinemaInfo = res.data.data
      })
    },
    // 当前放映厅排片列表
    loadShowingonPlans() {
      this.$http.ShowingonPlanApi.list({ room_id: this.cinema_room_id }).then(
        (res) => {
          console.log(res)
          if (res.data.code == 200) {
            this.tableData = res.data.data
          }
        }
      )
    },
    //更改排片状态
    publishPlan(id) {
      this.$http.ShowingonPlanApi.publish({ id }).then((res) => {
        console.log("发布排片", res)
        if (res.data.code == 200) {
          this.$message.success("排片发布成功")
        }
      })
    },
    //更改排片状态为未发布
    noPublishPlan(id) {
      this.$http.ShowingonPlanApi.noPublish({ id }).then((res) => {
        console.log("未发布排片", res)
        if (res.data.code == 200) {
          this.$message.warning("更改排片状态成功")
        }
      })
    },
    // 删除排片
    delShoingonPlans(id) {
      this.$http.ShowingonPlanApi.del({ id }).then((res) => {
        console.log("删除")
        if (res.data.code == 200) {
          this.$message.success("删除计划成功")
          this.loadShowingonPlans()
        }
      })
    },
  },
  mounted() {
    // 加载当前放映厅信息
    this.loadCurrentCinemaRooms()
    // 加载当前放映厅排片计划列表
    this.loadShowingonPlans()
  },
}
</script>
